<template>
  <div class="task" ref="task">
    <my-head title="任务查询"/>
    
    <mu-text-field v-model="value" placeholder="搜索" @keyup.enter.native="searchData()" class='search'><i class="iconfont icon-search" @click="searchData()"></i></mu-text-field>

    <mu-paper :z-depth="1" class="loadmore-wrap" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <mu-container ref="container" class="loadmore-content">
        <mu-load-more :loading="loading" @load="load" :refreshing="refreshing" @refresh="refresh">
          <mu-container>
            <mu-paper :z-depth="1">
              <mu-data-table stripe :loading="tableLoading" :columns="columns" :sort.sync="sort" @sort-change="handleSortChange" :data="list"  @row-click="userAction">
                <template slot-scope="scope">
                  <td>{{scope.row.vin}}</td>
                  <td>{{scope.row.type}}</td>
                  <td :class="scope.row.addClass">{{scope.row.status}}</td>
                </template>
              </mu-data-table>
            </mu-paper>
          </mu-container>
        </mu-load-more>
      </mu-container>
    </mu-paper>
  </div>
</template>

<script>
import myHead from '@/components/header'
import api from "@/common/api"
export default {
  name: 'task',
  data () {
    return {
      num: 10,
      refreshing: false,
      text: 'List',
      loading: false,
      tableLoading: true,
      value: '',
      wrapperHeight: 0,
      sort: {
        name: '',
        order: 'asc'
      },
      columns: [
          { title: 'VIN',  name: 'VIN' },
          { title: '任务类型', name: 'type', align: '', width: 100},
          { title: '状态', name: 'status',  align: '', width: 90}
      ],
      list: [],
      page: 0,
      isLoadData: true,
      requestOnce: true
    }
  },
  components: {
    myHead
  },
  methods: {
    searchData () {
      this.list = [];
      this.taskQuery(this.value)
    },
    userAction (index, row, event) {
      console.log(row);
      if(row.statusen !== 'FINISH'){
        switch (row.typeen) {
          case "pickCar":
            this.$router.push({name:'pickcar', params:{vin:row.vin}});
            break;
          case "out":
            this.$router.push({name:'outlibrary', params:{vin:row.vin}});
            break;
          case "in":
            this.$router.push({name:'inlibrary', params:{vin:row.vin}});
            break;
          case "move":
            this.$router.push({name:'transposing', params:{vin:row.vin}});
            break;
          case "fill":
            this.$router.push({name:'fill', params:{}});
            break;
          default:
            return false;
            break;
        }
      }
    },
    handleSortChange ({name, order}) {
      this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
    },
    refresh () {
      // 下拉刷新
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      this.page = 0;
      this.list = [];
      this.isLoadData = true;
      this.taskQuery();
    },
    load () {
      // 上啦更新
      this.loading = true;
      if(this.isLoadData){
        this.page ++;
        console.log(this.page);
        this.taskQuery();
      }else{
        this.Toast({
          duration: 1500,
          mask: true,
          message: "没有更多数据了"
        });
        this.loading = false;
      }
    },
    taskQuery (value) {
      this.tableLoading = true;
      let data = Object.assign({},this.$store.state.user,{
          content: {
            param: value ? value : "",
            page: this.page
          }
      });
      if(this.requestOnce){
        this.requestOnce = false;
        this.common.reqData(api.app('taskQuery'), data, res=>{
          this.requestOnce = true;
          this.tableLoading = this.loading = this.refreshing = false;
          let datas = res.data;
          console.log(datas);
          if(datas.content.tasks.length == 0){
            this.isLoadData = false;
          }else{
            if(datas.status == 100){
              for(let item of datas.content.tasks){
                item.status == '完成' ? item.addClass = 'completed' : item.addClass = 'executioning';
                this.list.push(item);
              }
            }else{
              this.Toast({
                duration: 0,
                mask: true,
                message: datas.msg
              });
            }
          }
        },err =>{
            this.requestOnce = true;
            console.log(err)
            this.Toast.clear();
        });
      }
    }
  },
  mounted () {
    // 确定高度
    this.wrapperHeight = document.documentElement.clientHeight - 113
    this.taskQuery();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
  padding: 0;
}
.mu-table td.executioning{
  color: red;
  font-weight: 900;
}
.mu-table td.completed{
  color: green;
}
.search{
  display: block;
  margin: 10px auto ;
  width: 90%;
}
.search input{
  padding: 0 ;
}
.loadmore-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.loadmore-wrap .mu-appbar {
    width: 100%;
}
.loadmore-content {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.mu-paper.mu-paper-round.mu-elevation-1{
  -webkit-box-shadow: none;
  box-shadow: none;
}
</style>
